<template>
  <div id="screen-container">
    <main class="screen-bg">

      <div class="header"></div>

      <div class="left-top">
        <pie-charts :echartDatas="chargingPile"></pie-charts>
      </div>
      <div class="left-bottom">
        <line-charts :echartDatas="processMonitoring"></line-charts>
      </div>

      <div class="right-top">
        <right-top-panel :panelItems="chargingTop4" :percentage="percentage"></right-top-panel>
      </div>
      <div class="right-center">
        <bar-charts :echartDatas="chargingStatistics"></bar-charts>
      </div>
      <div class="right-bottom">
        <right-bottom-svg :dots="exceptionMonitoring"></right-bottom-svg>
      </div>

      <div class="center">
        <center-svg></center-svg>
      </div>
      <div class="bottom">
        <bottom-panel :panelItems="dataAnalysis"></bottom-panel>
      </div>

    </main>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {
  chargingPileData,
  processMonitoringData,
  chargingStatisticsData,
  exceptionMonitoringData,
  dataAnalysisData,
  chargingTop4Data
} from './config/homeData.js'
import RightTopPanel from "@/views/screen/components/right-top-panel.vue";
import RightBottomSvg from "@/views/screen/components/right-bottom-svg.vue";
import CenterSvg from "@/views/screen/components/center-svg.vue";
import BottomPanel from "@/views/screen/components/bottom-panel.vue";
import LineCharts from "@/views/screen/components/line-echarts.vue";
import PieCharts from "@/views/screen/components/pie-echarts.vue";
import BarCharts from "@/views/screen/components/bar-echarts.vue";
import PieChartsDefault from "@/views/screen/components/pie-echarts-default.vue";
import WaterBall from "@/views/screen/components/water-ball.vue";
import axios from "axios";
import useScalePage from "@/views/screen/hooks/useScalePage.js";

// 充电桩饱和比例
let chargingPile = ref(chargingPileData)
// 流程监控
let processMonitoring = ref(processMonitoringData)
// 充电桩数据分析
let chargingStatistics = ref(chargingStatisticsData)
// 异常监控
let exceptionMonitoring = ref(exceptionMonitoringData)
// 充电桩数据分析
let dataAnalysis = ref(dataAnalysisData)
// 充电桩Top4占比
let chargingTop4 = ref(chargingTop4Data)
let percentage = ref(0)
let option = {
  targetX: 1920,
  targetY: 1080,
  targetRatio: 16 / 9
}
// 大屏适配
useScalePage(option)
const getPowerScreenData = async () => {
  const res = await axios.get('http://123.207.32.32:9060/beike/api/powerscreen')
  chargingPile.value = res.data.data.chargingPile.data
  processMonitoring.value = res.data.data.processMonitoring.data
  chargingStatistics.value = res.data.data.chargingStatistics.data
  exceptionMonitoring.value = res.data.data.exceptionMonitoring.data
  dataAnalysis.value = res.data.data.dataAnalysis.data
  chargingTop4.value = res.data.data.chargingTop4.data
  percentage.value = res.data.data.chargingTop4.totalPercentage
}

onMounted(() => {
  getPowerScreenData()
})

</script>

<style scoped lang="scss">
#screen-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transform-origin: left top;

  .screen-bg {
    /* 定位 */
    position: absolute;
    width: 100%;
    height: 100%;

    /* 背景 */
    background-color: #070a3c;
    background-image: url(@/assets/images/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .header {
      /* 定位 */
      position: absolute;
      top: 21px;
      left: 0;
      right: 0;
      height: 56px;

      /* 背景 */
      background-image: url(@/assets/images/bg_header.svg);
      background-repeat: no-repeat;
    }

    .left-top {
      /* 定位 */
      position: absolute;
      top: 116px;
      left: 16px;
      width: 536px;
      height: 443px;
      /* 背景 */
      background-image: url(@/assets/images/bg_left-top.svg);
      background-repeat: no-repeat;
    }

    .left-bottom {
      /* 定位 */
      position: absolute;
      bottom: 49px;
      left: 16px;
      width: 536px;
      height: 443px;
      /* 背景 */
      background-image: url(@/assets/images/bg_left_bottom.svg);
      background-repeat: no-repeat;
    }

    .right-top {
      position: absolute;
      right: 17px;
      top: 96px;
      width: 519px;
      height: 327px;

      background-image: url(@/assets/images/bg_right_top.svg);
      background-repeat: no-repeat;
    }

    .right-center {
      position: absolute;
      right: 17px;
      top: 443px;
      width: 519px;
      height: 327px;

      background-image: url(@/assets/images/bg_right_center.svg);
      background-repeat: no-repeat;
    }

    .right-bottom {
      position: absolute;
      right: 17px;
      bottom: 49px;
      width: 519px;
      height: 242px;

      display: flex;
      justify-content: center;
      align-items: center;

      background-image: url(@/assets/images/bg_right_bottom.svg);
      background-repeat: no-repeat;

    }

    .center {
      position: absolute;
      right: 540px;
      bottom: 272px;
      width: 823px;
      height: 710px;
    }

    .bottom {
      position: absolute;
      right: 540px;
      bottom: 49px;
      width: 823px;
      height: 209px;

      background-image: url(@/assets/images/bg_bottom.svg);
      background-repeat: no-repeat;
    }
  }
}
</style>